<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
      body {
        font: 150%/1.6 Baskerville, Palatino, serif;
      }

      main {
          transition: .6s;
          background: white;
      }

      main.de-emphasized {
        -webkit-filter: blur(3px);
        filter: blur(3px);
      }

      dialog {
          position: fixed;
          top: 50%;left: 50%;
          z-index: 1;
          width: 10em;
          padding: 2em;
          margin: -5em;
          border: 1px solid silver;
          border-radius: .5em;
          box-shadow: 0 .2em .5em rgba(0, 0, 0, .5),
            0 0 0 100vmax rgba(0,0,0,.2);;
            
      }

      dialog:not([open]) {
            display: none;
        }


    </style>
</head>
<body>
    <dialog>O HAI, I’m a dialog. Click on me to dismiss.</dialog>
    <main>
        <button>Show dialog</button>
       <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p> 
    </main>

    <script>
        const button = document.querySelector('button');
        const dialog = document.querySelector('dialog');
        const main = document.querySelector('main');

        button.onclick = () => {
            dialog.setAttribute('open', '');
            main.classList.add('de-emphasized');
        }

        dialog.onclick = () => {

            if (dialog.close) {
                dialog.close()
            } else {
                main.removeAttribute('open');
            }

            main.classList.remove('de-emphasized');
        }
    </script>
</body>
</html>